<style lang="less">
	.el-tag + .el-tag {
		margin-left: 10px;
	}
	.button-new-tag {
		margin-left: 10px;
	}
	.input-new-tag {
        width: 80px!important;
	    margin: 5px;
	    vertical-align: bottom;
	}
	.data_type .el-form-item__content{
		width: 100%;
		height: auto;
	}
	.form .el-input{
		width: 250px;
	}
    .ulog {
        font-size: 12px;
        color: #303133;
        margin: 5px;
    }
</style>
<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form
            ref="form"
            class="form"
            :model="form"
            :rules="rules"
            label-width="150px"
            size="mini"
            inline
            label-position="right"
          >
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.labelObject') + ':'" prop="labelObject" style="width: 100%;border: none;">
                <el-radio-group v-model="form.labelObject">
                  <el-radio
                    v-for="item in labelObject"
                    v-if="item.item_code != '' && item.item_code != '9000'"
                    :label="item.item_code"
                    @change="onChange"
                  >{{ item.item_text }}</el-radio>
                </el-radio-group>

              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.labelUpdateFrequency') + ':'" prop="labelUpdateFrequency" style="width: 100%;border: none;">
                <el-radio
                  v-for="item in labelUpdateFrequency"
                  v-if="item.item_code != ''"
                  v-model="form.labelUpdateFrequency"
                  :label="item.item_code"
                >{{ item.item_text }}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.labelCode') + ':'" prop="labelCode" style="width: 100%;">
                <!-- <el-col :span="5">
										<span>{{form.labelObject}}-</span>
									</el-col>
									<el-col :span="15">
										<el-input v-model="form.labelCode" :placeholder="$t('labelSpec.placeholder.labelCodeHint')">
										</el-input>
									</el-col> -->
                <el-input v-model="form.labelCode" maxlength="20" :placeholder="$t('labelSpec.placeholder.labelCodeHint')" @keyup.native="mouseout" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.labelDatasSource') + ':'" prop="labelDatasSource" style="width: 100%;border: none;">
                <el-radio
                  v-for="item in labelDatasSource"
                  v-if="item.item_code != ''"
                  v-model="form.labelDatasSource"
                  :label="item.item_code"
                >{{ item.item_text }}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.labelName') + ':'" prop="labelName" style="width: 100%;">
                <el-input v-model="form.labelName" maxlength="100" :placeholder="$t('labelSpec.placeholder.labelNameHint')" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.labelLevelId') + ':'" prop="labelLevelId" style="width: 100%;">
                <el-select v-model="form.labelLevelId" filterable>
                  <el-option
                    v-for="item in dialogOptions"
                    v-if="item.labelObject == form.labelObject"
                    :key="item.labelLevelId"
                    style="width: 250px;"
                    :label="item.labelLevelPathNameDialog"
                    :value="item.labelLevelId"
                    :title="item.labelLevelPathNameDialog"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.labelValueType') + ':'" prop="labelValueType" style="width: 100%;border: none;">
                <el-radio
                  v-for="item in labelValueType"
                  v-if="item.item_code != ''"
                  v-model="form.labelValueType"
                  :label="item.item_code"
                >{{ item.item_text }}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="form.labelValueType=='2000'" class="data_type" style="width: 100%;" :label="$t('labelSpec.listTable.labelValues') + ':'" prop="labelValues">
                <el-col>
                  <el-tag
                    v-for="tag in form.labelValues"
                    style="margin: 5px;white-space: inherit; height: 100%;"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag.labelValue }}-->{{ tag.labelValueName }}
                  </el-tag>
                  <el-input
                    v-if="inputVisible"
                    ref="saveTagInput"
                    v-model="labelValue"
                    class="input-new-tag"
                    size="small"
                    maxlength="10"
                    placeholder="Value"
                  />
                  <el-input
                    v-if="inputVisible"
                    v-model="labelValueName"
                    class="input-new-tag"
                    size="small"
                    placeholder="ValueName"
                    maxlength="20"
                  />

                  <div>
                    <el-button v-if="tagVisible" type="primary" circle class="el-icon-plus button-new-tag" @click="showInput" />
                    <el-button v-if="inputVisible" type="primary" circle class="el-icon-check button-new-tag" @click="handleInputConfirm" />
                    <el-button v-if="inputVisible" type="primary" circle class="el-icon-close button-new-tag" @click="hideInput" />
                  </div>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item class="data_type" :label="$t('labelSpec.listTable.labelDataType') + ':'" prop="labelDataType" style="width: 100%;border: none;">
                <el-radio
                  v-for="item in labelDataType"
                  v-if="item.item_code != ''"
                  v-model="form.labelDataType"
                  :label="item.item_code"
                >{{ item.item_text }}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.businessDesc') + ':'" prop="businessDesc" style="width: 100%;">
                <el-input v-model="form.businessDesc" maxlength="500" :placeholder="$t('labelSpec.placeholder.businessDescHint')" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.itDesc') + ':'" prop="itDesc" style="width: 100%;">
                <el-input v-model="form.itDesc" maxlength="500" :placeholder="$t('labelSpec.placeholder.itDescHint')" />
              </el-form-item>
            </el-col>
            <el-col :span="24" class="button_right">
              <el-button @click="onClose" v-text="$t('cancelText')" />
              <el-button type="primary" @click="onSubmit" v-text="$t('ok')" />
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div v-if="modelType=='edit' && activities.length > 0" class="block" style="padding-bottom: 10px;">
      <el-divider />
      <div>
        <p class="ulog">{{ $t('labelSpec.ulog') }}</p>
        <p v-for="(item , index) in activities" style="margin-left: 20px;">
          <span>{{ index + 1 }}、</span><span v-text="actDateFormat(item.statusDate)" /><span> {{ item.operateDesc }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/date'
export default {
  name: 'SepecDetail',
  props: {
	    dialogOptions: {
      type: Array,
      default: []
    },
    modelType: {
      type: String,
      default: ''
    },
    labelId: {
      type: Number,
      default: 0
    },
    labelObject: {
      type: Array,
      default: []
    },
    labelUpdateFrequency: {
      type: Array,
      default: []
    },
    labelDatasSource: {
      type: Array,
      default: []
    },
    labelValueType: {
      type: Array,
      default: []
    },
    labelDataType: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      inputVisible: false,
      tagVisible: true,
      labelValue: '',
      labelValueName: '',
      details: {},
      reverse: false,
      activities: [],
      rules: {
        labelObject: [
				  { required: true, message: this.$t('labelSpec.rules.labelObjec'), trigger: 'blur' }
        ],
        labelUpdateFrequency: [
				  { required: true, message: this.$t('labelSpec.rules.labelUpdateFrequency'), trigger: 'blur' }
        ],
        labelCode: [
				  { required: true, message: this.$t('labelSpec.rules.labelCode'), trigger: 'blur' },
				  { min: 1, max: 20, message: this.$t('labelSpec.rules.labelCodeLength'), trigger: 'blur' }
        ],
        labelDatasSource: [
				  { required: true, message: this.$t('labelSpec.rules.labelDatasSource'), trigger: 'blur' }
        ],
        labelName: [
				  { required: true, message: this.$t('labelSpec.rules.labelName'), trigger: 'blur' },
				  { min: 1, max: 100, message: this.$t('labelSpec.rules.labelNameLength'), trigger: 'blur' }
        ],
        labelLevelId: [
				  { required: true, message: this.$t('labelSpec.rules.labelLevelId'), trigger: 'blur' }
        ],
        labelValueType: [
				  { required: true, message: this.$t('labelSpec.rules.labelValueType'), trigger: 'blur' }
        ],
        labelDataType: [
				  { required: true, message: this.$t('labelSpec.rules.labelDataType'), trigger: 'blur' }
        ],
        labelValues: [
				  { required: true, message: this.$t('labelSpec.rules.labelValues'), trigger: 'blur' }
        ],
        businessDesc: [
				  { required: true, message: this.$t('labelSpec.rules.businessDesc'), trigger: 'blur' },
				  { min: 1, max: 500, message: this.$t('labelSpec.rules.businessDescLength'), trigger: 'blur' }
        ],
        itDesc: [
				  { required: true, message: this.$t('labelSpec.rules.itDesc'), trigger: 'blur' },
				  { min: 1, max: 500, message: this.$t('labelSpec.rules.itDescLength'), trigger: 'blur' }
        ]

      },
      defaultValue: {
        labelObject: this.labelObject[0].item_code,
        labelUpdateFrequency: this.labelUpdateFrequency[0].item_code,
        labelDatasSource: this.labelDatasSource[0].item_code,
        labelValueType: this.labelValueType[0].item_code,
        labelDataType: this.labelDataType[0].item_code,
        labelLevelId: null,
        labelValues: []
      },
      form: {
        labelObject: '',
        labelUpdateFrequency: '',
        labelDatasSource: '',
        labelValueType: '',
        labelDataType: '',
        labelCode: '',
        labelLevelId: null,
        labelDataCol: '',
        applyRemark: '',
        auditStaff: '',
        labelValues: []
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.form = this.defaultValue
      if (this.modelType != 'add') {
        this.getLabelDetails()
      }
    },
    mouseout() {
      this.form.labelCode = this.form.labelCode.toLowerCase()
      console.log(this.form.labelCode)
    },
    actDateFormat(data) {
      return dateFormat(new Date(data))
    },
    getLabelDetails() {
      const that = this
      this.R.forTaglib.get('/mktlabel/details/' + this.labelId).then(res => {
			    if (res.ok) {
          that.form = res
          that.activities = res.labelLogs
        }
      })
    },
    onSubmit() {
      let reqUrl = '/mktlabel/addLabel'
      if (this.modelType == 'edit') {
        reqUrl = '/mktlabel/editLabel'
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.R.forTaglib.postJson(reqUrl, this.form).then(res => {
            if (res.ok) {
              this.$emit('onAddSuccess', true)
            }
          }).catch(err => {
            this.$message.error(err.toString())
          })
        }
      })
    },
    onClose() {
      this.$emit('onAddSuccess', true)
    },
    handleClose(tag) {
      console.log(tag)
      this.form.labelValues.splice(this.form.labelValues.indexOf(tag), 1)
    },
    showInput() {
      this.tagVisible = false
      this.inputVisible = true
      this.$nextTick(_ => {
			  this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    hideInput() {
      this.tagVisible = true
      this.inputVisible = false
      this.labelValue = ''
      this.labelValueName = ''
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const labelValue = this.labelValue; const labelValueName = this.labelValueName
      debugger
      if ((!labelValue || !labelValueName) && this.form.labelValues.length > 0) {
        this.$message.error(this.$t('labelSpec.error.dictError'))
        return
      }
      if (labelValue && labelValueName) {
        const valus = {}
        valus.labelValue = labelValue
        valus.labelValueName = labelValueName
        this.form.labelValues.push(valus)
      }
      this.tagVisible = true
      this.inputVisible = false
      this.labelValue = ''
      this.labelValueName = ''
    },
    onChange(label) {
      this.form.labelLevelId = ''
    }
  }
}
</script>

